<template>
    <div>
        <page-header :title="`「${department}」职位管理`" content="页面数据为 Mock 示例数据，非真实数据。">
            <el-button icon="el-icon-arrow-left" size="mini" round @click="$router.go(-1)">返回</el-button>
        </page-header>
        <page-main>
            <el-button type="primary" icon="el-icon-plus" @click="onCreate">新增职位</el-button>
            <search-bar>
                <el-form :model="search" size="small" label-width="100px" label-suffix="：">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="职位">
                                <el-input v-model="search.title" placeholder="请输入职位名称，支持模糊查询" clearable @keydown.enter.native="getDataList" @clear="getDataList" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="getDataList">筛 选</el-button>
                    </el-form-item>
                </el-form>
            </search-bar>
            <batch-action-bar v-if="batch.enable" :data="dataList" :selection-data="batch.selectionDataList" @check-all="$refs.table.toggleAllSelection()" @check-null="$refs.table.clearSelection()">
                <el-button size="small">单个批量操作按钮</el-button>
                <el-button-group>
                    <el-button size="small">批量操作按钮组1</el-button>
                    <el-button size="small">批量操作按钮组2</el-button>
                </el-button-group>
            </batch-action-bar>
            <el-table ref="table" v-loading="loading" class="list-table" :data="dataList" border stripe highlight-current-row @sort-change="onSortChange" @selection-change="batch.selectionDataList = $event">
                <el-table-column v-if="batch.enable" type="selection" width="40" />
                <el-table-column prop="title" label="职位" />
                <el-table-column label="操作" width="250" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="onEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" plain @click="onDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page="pagination.page" :total="pagination.total" :page-size="pagination.size" :page-sizes="pagination.sizes" :layout="pagination.layout" :hide-on-single-page="false" class="pagination" background @size-change="onSizeChange" @current-change="onCurrentChange" />
        </page-main>
        <FormDialog :id="detailFormDialog.id" :department-id="$route.params.department_id" :visible.sync="detailFormDialog.visible" @success="getDataList" />
    </div>
</template>

<script>
import paginationMixin from '@/mixins/pagination'
import FormDialog from './components/FormDialog/index'

export default {
    name: 'PagesExampleDepartmentJobList',
    components: {
        FormDialog
    },
    mixins: [paginationMixin],
    beforeRouteEnter(to, from, next) {
        // 进入页面时，先将当前页面的 name 信息存入 keep-alive 全局状态
        next(vm => {
            if (!vm.$store.state.settings.enableTabbar && !vm.dialogMode) {
                vm.$store.commit('keepAlive/add', 'PagesExampleDepartmentJobList')
            }
        })
    },
    beforeRouteLeave(to, from, next) {
        if (!this.$store.state.settings.enableTabbar && !this.dialogMode) {
            // 因为并不是所有的路由跳转都需要将当前页面进行缓存，例如最常见的情况，从列表页进入详情页，则需要将列表页缓存，而从列表页跳转到其它页面，则不需要将列表页缓存
            // 所以下面的代码意思就是，如果目标路由的 name 不在指定的数组内，则将当前页面的 name 从 keep-alive 中删除
            if (!['XX'].includes(to.name)) {
                // 注意：上面校验的是路由的 name ，下面记录的是当前页面的 name
                this.$store.commit('keepAlive/remove', 'PagesExampleDepartmentJobList')
            }
        }
        next()
    },
    data() {
        return {
            // 是否开启详情弹框模式
            dialogMode: false,
            // 详情弹框
            detailFormDialog: {
                visible: false,
                id: ''
            },
            // 搜索
            search: {
                title: ''
            },
            // 批量操作
            batch: {
                enable: false,
                selectionDataList: []
            },
            // 列表数据
            dataList: [],
            department: ''
        }
    },
    mounted() {
        this.getDepartmentInfo()
        this.getDataList()
        if (!this.dialogMode) {
            this.$eventBus.$on('get-data-list', () => {
                this.getDataList()
            })
        }
    },
    beforeDestroy() {
        if (!this.dialogMode) {
            this.$eventBus.$off('get-data-list')
        }
    },
    methods: {
        getDepartmentInfo() {
            this.$api.get('mock/pages_example/department/detail', {
                params: {
                    id: this.$route.params.department_id
                }
            }).then(res => {
                this.department = res.data.title
            })
        },
        getDataList() {
            this.loading = true
            let params = this.getParams()
            params.department_id = this.$route.params.department_id
            this.search.title && (params.title = this.search.title)
            this.$api.get('mock/pages_example/job/list', {
                params
            }).then(res => {
                this.loading = false
                this.dataList = res.data.list
                this.pagination.total = res.data.total
            })
        },
        onCreate() {
            if (!this.dialogMode) {
                this.$router.push({
                    name: 'pagesExampleGeneralJobCreate',
                    params: {
                        department_id: this.$route.params.department_id
                    }
                })
            } else {
                this.detailFormDialog.id = ''
                this.detailFormDialog.visible = true
            }
        },
        onEdit(row) {
            if (!this.dialogMode) {
                this.$router.push({
                    name: 'pagesExampleGeneralJobEdit',
                    params: {
                        id: row.id,
                        department_id: this.$route.params.department_id
                    }
                })
            } else {
                this.detailFormDialog.id = row.id
                this.detailFormDialog.visible = true
            }
        },
        onDel(row) {
            this.$confirm(`确认删除「${row.title}」吗？`, '确认信息').then(() => {
                this.$api.post('mock/pages_example/job/delete', {
                    id: row.id
                }).then(() => {
                    this.getDataList()
                    this.$message.success({
                        message: '模拟删除成功',
                        center: true
                    })
                })
            }).catch(() => {})
        }
    }
}
</script>

<style lang="scss" scoped>
.el-pagination {
    margin-top: 20px;
}
</style>
